<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="../css/dataGalaxy/index.css"/>
    <link rel="stylesheet" href="../css/dataGalaxy/dg-scholar.css"/>
    <link rel="stylesheet" href="../css/orgScholar.css"/>
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/style.css">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
</head>
<body  class="body-loading">
<div id="box">
    <div class="box-left scholar-list">
        <h2 style="font-weight: 600">{{orgName}}</h2>
        <span class="top-professors">
                <i class="fa fa-user" style="font-size: 18px"></i>
                <h4>Top Professors</h4>
            </span>
        <ul class="scholar-ul">
            <li v-for="scholar in scholarGroupByCurrentFos"><a @click="searchByName(scholar.id)" class="blue">{{scholar.name}}</a></li>
            <li v-for="scholar in scholarOfRemaining"><a @click="searchByName(scholar.id)">{{scholar.name}}</a></li>
            <div class="fold" @click="openFold()">
                <i class="fa fa-chevron-down"></i>
            </div>
        </ul>
    </div>
    <div class="box-right">
        <div class="main">
            <div class="title">Author Map [Full View]</div>
            <div class="controller">
                <div class="num">
                    <p>Amount of publication</p>
                    <div id="check" class="ul check">
                        <div><input type="checkbox" class="quanxuan1 input_check" id="ntype" checked>
                            <label for="ntype"></label>All Selected
                        </div>
                        <div><input type="checkbox" class="input_check input_check1" id="ntype4" checked><label
                                for="ntype4"></label>100+
                            <img src="../img/dataGalaxy/1.png"/>
                        </div>
                        <div><input type="checkbox" class="input_check input_check1" id="ntype3" checked><label
                                for="ntype3"></label>60-100
                            <img src="../img/dataGalaxy/2.png"/>
                        </div>
                        <div><input type="checkbox" class="input_check input_check1" id="ntype2" checked> <label
                                for="ntype2"></label>51-60
                            <img src="../img/dataGalaxy/3.png"/>
                        </div>
                        <div><input type="checkbox" class="input_check input_check1" id="ntype1" checked><label
                                for="ntype1"></label>11-50
                            <img src="../img/dataGalaxy/4.png"/>
                        </div>

                        <div><input type="checkbox" class="input_check input_check1" id="ntype0" checked><label
                                for="ntype0"></label>0-10
                            <img src="../img/dataGalaxy/5.png"/>
                        </div>
                    </div>
                </div>
                <div class="num num2">
                    <p>Number of Co-authorship</p>
                    <div id="check2" class="ul check2 check">
                        <div><input type="checkbox" class="quanxuan2 input_check" id="ltype" checked>
                            <label for="ltype"></label>All Selected
                        </div>
                        <div><input type="checkbox" class="input_check input_check2" id="ltype2" checked><label
                                for="ltype2"></label>5+
                            <div class="colorTip" style="background-color: #7a8fef"></div>
                        </div>
                        <div><input type="checkbox" class="input_check input_check2" id="ltype1" checked><label
                                for="ltype1"></label>2-5
                            <div class="colorTip" style="background-color: #66b1ba"></div>
                        </div>
                        <div><input type="checkbox" class="input_check input_check2" id="ltype0" checked><label
                                for="ltype0"></label>1-2
                            <div class="colorTip" style="background-color: #7f7f7f"></div>
                        </div>
                    </div>
                </div>
                <div class="num3">
                    <div>
                        <label for="nodeLabel">Node Label</label>
                        <input type="checkbox" class="showTips" id="nodeLabel">
                    </div>
                    <div>
                        <label for="linkLabel">Link Label</label>
                        <input type="checkbox" class="showTips" id="linkLabel">
                    </div>
                </div>
                <!--<div class="num3">
                    <span>关系发现</span>
                    <button type="button" class="show_bfs">开始</button>
                    <div class="bfs_form">
                        起点：<input type="text" class="id1" disabled="true" placeholder="在图上点击起点"/><br/>
                        终点：<input type="text" class="id2" disabled="true"/><br/>
                        最长：<input type="number" value="6" class="maxlength"/><br/>
                        <p class="result"></p>
                        <button type="button" class="btn">确定</button>
                        <button type="button" class="res">重置</button>
                    </div>
                </div>-->
            </div>
            <div class="mark-box">
                <p>The size of the nodes represents the number of author's publication. The edges represent the number of co-authorship. The darker the color, the greater the value.</p>
            </div>
            <div class="container"></div>
            <div class="float-menu">
                <!--<div class="search-box">
                    <input>
                    <div class="search-btn">Search</div>
                </div>-->
                <div class="scholar-info">
                    <p class="scholar-info-title">{{orgName}}</p>
                    <span>Author Map</span>
                    <span>Total number of papers: {{totalPaperNum}}</span>
                    <span>Total number of authors: {{scholarList.length}}</span>
                    <!--<ul>
                        <li>COLORING</li>
                        <li>TOP 5</li>
                        <li>FIELD FILTER</li>
                    </ul>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="loading">
    <div class="sk-spinner sk-spinner-three-bounce loading-box">
        <div class="sk-bounce1"></div>
        <div class="sk-bounce2"></div>
        <div class="sk-bounce3"></div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/layer/layer.js"></script>
<!--<script src="../js/polyfill.min.js"></script>-->
<script src="../js/vue.min.js"></script>
<script src="../js/dataGalaxy/dg-scholar.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    //定义一个比较器
    function compare(propertyName) {
        return function(object1, object2) {
            var value1 = object1[propertyName].toLowerCase();
            var value2 = object2[propertyName].toLowerCase();
            if (value2 < value1) {
                return 1;
            } else if (value2 > value1) {
                return -1;
            } else {
                return 0;
            }
        }
    }
    $(".container").height(document.body.offsetHeight * 0.8);
    var netWorkChart;
    var kingVue = new Vue({
        el: '#box',
        data: {
            orgName: "",
            orgId: "",
            fosName: "",
            totalPaperNum: 0,
            scholarList: [], // 机构下所有专家
            scholarGroupByCurrentFos: [], // 机构下当前查询领域的专家
            scholarOfRemaining: [] // 余下的专家
        },
        mounted: function () {
            var _this = this;
            _this.orgName = getUrlParam("orgName");
            _this.orgId = getUrlParam("orgId");
            _this.fosName = getUrlParam("fosName");
            _this.queryScholarsByOrg(_this.orgId);
        },
        watch: {
            scholarList: function () {
                var _this = this;
                _this.initNetworkChart(_this.orgId);
                _this.queryScholarsByOrgAndFos(_this.orgId, _this.fosName);
            }
        },
        methods: {
            queryScholarsByOrgAndFos: function (orgId, fosName) {
                var _this = this;
                gAjax.request("expert/getExpertByOrgAndFos", {orgId: orgId, fosName: fosName}).then(function (result) {
                    _this.scholarGroupByCurrentFos = result.sort(compare('name'));
                    var currentMap = {};
                    _this.scholarGroupByCurrentFos.forEach(function (item) {
                        currentMap[item["name"]] = true;
                    })
                    var scholarOfRemaining = [];
                    _this.scholarList.forEach(function (item) {
                        if(!currentMap[item["name"]]) {
                            scholarOfRemaining.push(item);
                        }
                    });
                    _this.scholarOfRemaining = scholarOfRemaining.sort(compare('name'));

                    _this.$nextTick(function () {
                        $(".scholar-ul li").each(function (index,element) {
                            if(index > 15){
                                $(this).hide()
                            }
                        });

                        $("body").removeClass("body-loading");
                        $(".loading").remove();
                    });
                    console.log(_this.scholarGroupByCurrentFos);
                    console.log(_this.scholarOfRemaining)
                });
            },
            queryScholarsByOrg: function (orgId) {
                var _this = this;
                gAjax.request("expert/getExpertByOrg", {orgId: orgId}).then(function (result) {
                    _this.scholarList = result;
                    result.forEach(function (item) {
                        var pNum = item["pnum"] != undefined ? item["pnum"] : 0;
                        _this.totalPaperNum += pNum;
                        // 当前所查询领域的专家显示在前(标蓝处理，按字母排序），余下专家排后按字母排序
                    });
                });
            },
            searchByName: function (scholarId) { /*根据学者名字再查询*/
                if (scholarId != null) {
                    window.open("analysis.html?scholarId=" + scholarId);
                }
            },
            initNetworkChart: function (orgId) {
                var _this = this;
                gAjax.request("expert/getRelateExpertByOrg", {
                    orgId: orgId,
                    nodesCount: 3000
                }).then(function (result) {
                	
                	var graph = {nodes: [], links: []};
                    var nodesSet = [];
                    var linksSet = [];
                    
                    var nodesMap = {};
                    var linksMap = {};
                    
                    var i = 0;
                    var j = 0;
                    
                    result.forEach(function (item) {
                    	/**
                    	* 说明是有关系的
                    	*/
                    	
                    	var expertId_ = item["eId"];
                		var index_ = $.inArray(expertId_,nodesSet);
                    	
                		if(index_ == -1) {
                			nodesSet.push(expertId_);
                			nodesMap[expertId_] = i++;
                			var sourceNode_ = {
                                id: nodesMap[expertId_],
                                name: item["ename"],
                                paper_count: item["epnum"],
                                url: "analysis.html?scholarId=" + item["eId"]
                             };
                   			
                             graph.nodes.push(sourceNode_);
                		}
                    	
                    	if(item["relate"]) {
                    		
                    		var expertId = item["rId"];
                    		var index = $.inArray(expertId,nodesSet);
                    		
                    		if(index == -1) {
                    			nodesSet.push(expertId);
                    			nodesMap[expertId] = i++;
                    			var sourceNode = {
                                     id: nodesMap[expertId],
                                     name: item["rname"],
                                     paper_count: item["rpnum"],
                                     url: "analysis.html?scholarId=" + item["rId"]
                                 };
                    			
                                 graph.nodes.push(sourceNode);
                    		}
                    		
                    		var linkR1 = item["rId"] + "-" + item["eId"];
                    		var linkR2 = item["eId"] + "-" + item["rId"];
                    		
                    		var index1 = $.inArray(linkR1,linksSet);
                    		var index2 = $.inArray(linkR2,linksSet);
                    		
                    		/**
                    		* 2个关系都不存在
                    		*/
                    		if(index1 == -1 && index2 == -1) {
                    			linksSet.push(linkR1);
                    			linksSet.push(linkR2);
                    			var link = {
                                     id: j++,
                                     source: nodesMap[item["eId"]],
                                     target: nodesMap[item["rId"]],
                                     co_count: Math.floor(Math.random() * 10 + 1)
                                 };
                                 graph.links.push(link);
                    			
                    		}
	
                    	}
                    })
                	
                    /* console.log(result);
                    var graph = {nodes: [], links: []};
                    var i = 0, j = 0;
                    var nodesMap = {}, linksMap = {};
                    _this.scholarList.forEach(function (item) {
                        if (!nodesMap[item["name"]] && nodesMap[item["name"]] != 0) {
                            nodesMap[item["name"]] = i++;
                            var sourceNode = {
                                id: nodesMap[item["name"]],
                                name: item["name"],
                                paper_count: item["pnum"],
                                url: "analysis.html?scholarId=" + item["id"]
                            };
                            graph.nodes.push(sourceNode);
                        }
                    });
                    result.forEach(function (item) {
                        if (!nodesMap[item["e.name"]] && nodesMap[item["e.name"]] != 0) {
                            nodesMap[item["e.name"]] = i++;
                            var sourceNode = {
                                id: nodesMap[item["e.name"]],
                                name: item["e.name"],
                                paper_count: item["e.pnum"],
                                url: "analysis.html?scholarId=" + item["id(e)"]
                            };
                            graph.nodes.push(sourceNode);
                        }
                        if (!nodesMap[item["e1.name"]] && nodesMap[item["e1.name"]] != 0) {
                            nodesMap[item["e1.name"]] = i++;
                            var sourceNode = {
                                id: nodesMap[item["e1.name"]],
                                name: item["e1.name"],
                                paper_count: item["e1.pnum"],
                                url: "analysis.html?scholarId=" + item["id(e1)"]
                            };
                            graph.nodes.push(sourceNode);
                        }

                        if (!linksMap[item["id(e1)"] + "-" + item["id(e)"]] && !linksMap[item["id(e)"] + "-" + item["id(e1)"]]) {
                            linksMap[item["id(e)"] + "-" + item["id(e1)"]] = j + 1; // 从1开始，方便判断，如果从0开始，！0为true
                            var link = {
                                id: j++,
                                source: nodesMap[item["e.name"]],
                                target: nodesMap[item["e1.name"]],
                                co_count: Math.floor(Math.random() * 10 + 1)
                            };
                            graph.links.push(link);
                        }
                    }); */
                    
                    
                    initKG("../js/dataGalaxy/conf.json", "div .container", graph, function() {
                        recordContainerClick(function() {
                            $('#nodeLabel').prop('checked', false);
                            $('#linkLabel').prop('checked', false);
                        });
                        recordNodeClick(function(d) {
                            /*$("#eventRecorder").text("点击节点"+d.id);*/
                        });

                    });
                    console.log(graph)
                });
            },
            openFold: function () {
                if($(".fold i").attr("class") == "fa fa-chevron-down"){
                    $(".fold i").removeClass("fa fa-chevron-down");
                    $(".fold i").addClass("fa fa-chevron-up");
                    $(".scholar-ul li").show();
                }else{
                    $(".fold i").removeClass("fa fa-chevron-up");
                    $(".fold i").addClass("fa fa-chevron-down");
                    $(".scholar-ul li").each(function (index,element) {
                        if(index > 15){
                            $(this).hide()
                        }
                    })
                }
            }
        }
        
    });


    $(".num .quanxuan1").click(function(){//给全选按钮加上点击事件
        console.log($(this)	)
        //	console.log($(this).prop("checked"))
        var xz = $(this).prop("checked");//判断全选按钮的选中状态

        var ck = $(".input_check1").prop("checked",xz);  //让class名为qx的选项的选中状态和全选按钮的选中状态一致。
    })
    $('.num2 .quanxuan2').click(function(){
        var xz = $(this).prop("checked");//判断全选按钮的选中状态
        var ck = $(".input_check2").prop("checked",xz);  //让class名为qx的选项的选中状态和全选按钮的选中状态一致。
    })

    $(".wrapper").click(function(){
        $(".wrapper i").css('color','#b5cad0')
        $(this).find("i").css('color','#69b4bd')
    })
    //console.log($("#check5"))




    //根据图例的选择过滤节点和边
    function filterByLegend() {
        $(document).on('change', $("checkbox.input_check"), function() {
            var nodeShows = [];
            var linkShows = [];
            var nodeHides = [];
            var linkHides = [];
            $(":checkbox").each(function() {
                if($(this).prop('checked') === true) {
                    if($(this).hasClass('input_check1')){
                        nodeShows.push(this.id);
                    }else if($(this).hasClass('input_check2')){
                        linkShows.push(this.id);
                    }
                }else{
                    if($(this).hasClass('input_check1')){
                        nodeHides.push(this.id);
                    }else if($(this).hasClass('input_check2')){
                        linkHides.push(this.id);
                    }
                }
            })
            filterKG(nodeShows, linkShows, nodeHides, linkHides);

        })
    }


    filterByLegend();


    //Lable标签显示
    $(document).on('change', $('#nodeLabel'), function () {
        if ($('#nodeLabel').prop('checked') === true) {
            showNodeLabel(true);
        } else {
            showNodeLabel(false);
        }
    });
    $(document).on('change', $('#linkLabel'), function () {
        if ($('#linkLabel').prop('checked') === true) {
            showLinkLabel(true);
        } else {
            showLinkLabel(false);
        }
    });

    //关系发现按钮
    $('.bfs_form').css('display','none')
    $('.btn').hide()
    $('.res').hide()

    $('.show_bfs').click(function(){
        $(this).css('display','none')
        $('.bfs_form').css('display','block')

        recordNodeClick(recordStartNode);


    })
    //重置按钮
    $('.res').click(function(){
        $('.id1').val(null);
        $('.id2').val(null);
        $('.bfs_form').css('display','none')
        $('.num3 span').show()
        $('.show_bfs').show()
        $('.result').text("");

    })

    function recordStartNode(node){
        $('.id1').val(node.name);
        $('.id1').attr('test', node.id);
        recordNodeClick(recordEndNode);
        $('.id2').attr('placeholder','在图上点击终点')
    }
    function recordEndNode(node){

        $('.id2').val(node.name);
        $('.id2').attr('test', node.id);
        recordNodeClick();
        $('.btn').show()
        $('.res').show()
    }

    $('.btn').click(function(){
        var num1 = Number($('.id1').attr('test'));
        var num2 = Number($('.id2').attr('test'));

        var result = findRelationBetween2Nodes(num1, num2, Number($('.maxlength').val()));
        $('.result').text("发现" + result.length + "条路径") ;
    })
</script>
</body>
</html>